<%--
  Created by IntelliJ IDEA.
  User: sztzedu
  Date: 17-3-14
  Time: 上午9:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="${path}/css/public.css"/>
    <link rel="stylesheet"
          href="${path}/css/themes/base/jquery.ui.all.css">
    <link rel="stylesheet" href="${path}/js/demos.css">

    <script type="text/javascript"
            src="${path}/js/jquery-1.7.2.js"></script>
    <script type="text/javascript"
            src="${path}/js/jquery.ui.core.js"></script>
    <script type="text/javascript"
            src="${path}/js/jquery.ui.widget.js"></script>
    <script type="text/javascript"
            src="${path}/js/jquery.ui.position.js"></script>
    <script type="text/javascript"
            src="${path}/js/jquery.ui.autocomplete.js"></script>
    <script type="text/javascript"
            src="${path}/js/jquery.ui.datepicker.js"></script>
    <script type="text/javascript"
            src="${path}/js/jquery.ui.datepicker-zh-CN.js"></script>
    <script src="${path}/js/jquery.ui.button.js"></script>
    <link rel="stylesheet" href="${path}/css/icons.css">
    <script src="${path}/js/icons.js"></script>
    <title>新增合同</title>

    <script type="text/javascript" src="${path}/js/basic.js"></script>
    <script type="text/javascript">
        $(function () {
            /* var val=document.getElementById("tagCutomers").value; */
            //var val=document.getElementById("startSrvDate").value;
            //	alert(val);
            var customers = $("#customers").attr("value").split(",");
            $("#tagCutomers").autocomplete({
                source: customers
            });
         /*   var signUsers = $("#signUsers").attr("value").split(",");
            $("#tagSignUsers").autocomplete({
                source: signUsers
            });*/
            function myDatePicker(id) {
                //Remove the datepicker functionality completely. This will return the element back to its pre-init state.
                $("#" + id).datepicker("destroy");
                $("#" + id).datepicker();
                $("#" + id).datepicker("option", "dateFormat", "yy-mm-dd");
                $("#" + id).datepicker($.datepicker.regional["zh-CN"]);
            }

            /*$("#tagCutomers").blur(function() {
                $.ajax( {
                    //请求路径
                    url : "/contract/ajaxGetOwner",
                    //请求类型
                    type : 'post',
                    //数据格式
                    dataType : "json",
                    //提交的数据
                    data : {
                        "contract.customerName" : this.value
                    },
                    //处理失败
                    error : function() {
                    },
                    //处理成功…
                    success : function(result) {
                        if (result != null) {
                            $("#tagSignUsers").val(result);
                            $("#tagSignUsers").attr("readonly", "readonly");
                        } else {
                            $("#tagSignUsers").val("");
                            $("#tagSignUsers").attr("readonly", null);
                        }
                    }
                });
            });
*/
            $("#addTable").click(function () {
                    //1.动态计算当前 i
                    var currentId = $("#payTable").children()[1].childElementCount;//当前tr的id
                    var currentIndex = currentId - 1;

                    $("#payTable").append("<tr class='trPay' id='tr" + currentId + "'>" +
                        "<td style='text-align: center;'></td>" +
                        "<td style='width:120px;'>" +
                        "<select id='payName" + currentId + "' name='PayName" + currentId + "' onchange='start();'>" +
                        "<option value='firstPay'>首付款</option>" +
                        "<option value='leftPay'>余款</option>" +
                        "<option value='lastPay'>尾款</option>" +
                        "<option value='allPay'>全款</option>" +
                        "</select><span class='required'>&nbsp;*</span></td>" +
                        "<td style='width:120px;text-align: center;'>" +
                        "<input id='amount" + currentId + "' class='amount' style='text-align:right;' size='12' name='amount" + currentId + "' type='text' /><span class='required'>&nbsp;*</span></td>" +
                        "<td style='width:120px;text-align: center;'>" +
                        "<input id='dueDate" + currentId + "' name='dueDate" + currentId + "' type='text' size='12' class='date'/><span class='required'>&nbsp;*</span></td>" +
                        "<td> <input id='remark" + currentId + "' name='remark" + currentId + "' type='text'/>" +
                        "<td style='text-align: center;'><img class='delImg' id='" + currentId + "' width='50px' height='50px' src='/crm/images/del.png' /></td></tr>");
                    //设置日期控件
                    myDatePicker("dueDate" + currentId);
                });

            $("#btnSave").live("click", function () {
                var list = document.getElementById("payTable").getElementsByTagName("select");
                var strs="";
                for (var i = 0;i<list.length;i++){
                    strs+=list[i].value+":";
                }
                $("#selected").val(strs);
//                var amounts = document.getElementById("payTable").;
//                $("#amount").val();
//                $("#payTable tr").each(function () {
//                    str+= $(this).children('td:eq(2)').value+":";
//                });
//                $("#amount").val(str);
                var amountList = document.getElementById("payTable").getElementsByTagName("input");
                var amounts="";
                for (var i = 0;i<amountList.length;i++){
                    amounts+=amountList[i].value+":";
                }
                $("#amount").val(amounts);


                $("#contractForm").submit();
            });




            $(".delImg").live(
                "click",
                function () {
                    var j = this.id;
                    $("#tr" + j).remove();
                    //1.更新tr的id
                    var num = 1;
                    $(".trPay").each(function () {
                        //alert(this.id);
                        var id = this.id;
                        var imgId = id.substring(2);
                        var index = num - 1;
                        $("#payName" + imgId).attr("name",
                            "payments[" + index + "].payName");
                        $("#payName" + imgId).attr("id", "payName" + num);
                        $("#amount" + imgId).attr("name",
                            "payments[" + index + "].amount");
                        $("#amount" + imgId).attr("id", "amount" + num);
                        $("#dueDate" + imgId).attr("name",
                            "payments[" + index + "].dueDate");
                        $("#dueDate" + imgId).attr("id",
                            "dueDate" + num);
                        $("#remark" + imgId).attr("name",
                            "payments[" + index + "].remark");
                        $("#remark" + imgId).attr("id", "remark" + num);

                        $("#" + imgId).attr("id", num);
                        $("#" + id).attr("id", "tr" + num);
                        $("#" + num).attr("id", num);
                        myDatePicker("dueDate" + num);
                        num++;
                    });
                });
        });






//        function start(){
//            var list = document.getElementById("payTable").getElementsByTagName("select");
//            for (var i = 0;i<list.length;i++){
//                alert(list[i].value);
//            }
//
//            /*alert($(".Payment").val());*/
//        }



        function tempChange() {
            $("#tempAttr").attr("value", $("#temp").val());
            $("#tempForm").submit();
        }
    </script>
</head>
<div>
<div class="main">
    <form id="tempForm" name="tempForm" action="${path}/contract/selectTem" method="post">
        <input type="hidden" name="contractId" value="${contractId}" id="tempAttr"/>
    </form>
    <div class="content">
        <div class="pageHead">
            <table>
                <tr>
                    <th width="8">
                        <img src="${path}/images/c_l.gif" height="31" width="8"/>
                    </th>
                    <th align="left" class="title_area">
                        当前位置：合同管理 &gt; 新增合同
                    </th>
                    <th width="9">
                        <img class="img" src="${path}/images/c_r.gif" height="31"
                             width="9">
                    </th>
                </tr>
            </table>
        </div>
        <!-- 显示错误信息 -->
        <!-- 清除session错误信息 -->
        <%--<form:form id="contractForm" modelAttribute="contract" action="${path}/contract/save">--%>
        <form action="${path}/contract/save">
            <input type="hidden" id="selected" name="selected"/>
            <input type="hidden" id="amount" name="amount"/>
            <div class="pageBody">
                <div class="customerDiv">
                    <table class="mytable" border="0">
                        <caption>
                            基本信息
                        </caption>
                        <tr>
                            <th>
                                合同类型
                            </th>
                            <td>
                                <select name="contractDto.templateId" id="temp" onchange="tempChange();">
                                    <option value="">==请选择==</option>
                                    <c:forEach var="contractTemplate" items="${contractTemplates}">
                                        <option value="${contractTemplate.id}" <c:if test="${contractTemplate.id==contractId}"> selected="selected" </c:if>>${contractTemplate.name}</option>
                                    </c:forEach>
                                </select>
                                <span class="required">*</span>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                公司合同号
                            </th>
                            <td>
                                <%--<form:input path="inNum"></form:input>--%>
                                <input type="text" name="contractDto.inNum" size="20" value="" id="contractForm_contract_inNum"/>
                                <span class="required">*</span>
                                <span class="required">${erros['contract.inNum']}</span>
                                <%--<form:errors path="inNum"></form:errors>--%>
                            </td>
                            <th>
                                客户订单号
                            </th>
                            <td>
                                <input type="text" name="contractDto.exNum" size="20" value="" id="contractForm_contract_exNum"/>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                客户/公司名称
                            </th>
                            <td>
                                <input type="text"  name="customers" value="" id="customers"/>
                                <%--<form:input path="customerName"/>--%>
                                <span class="required">*</span>
                                <span class="required">${erros['contract.customerName']}</span>
                                <%--<span class="required"><form:errors path="customerName"></form:errors></span>--%>
                            </td>
                            <th>
                                签约日期
                            </th>
                            <td>
                                <%--<form:input path="signDate"/>--%>
                                <input type="text" name="contract.signDate" size="20" value="" readonly="readonly" id="contractForm_contract_signDate" class="date"/>
                                <span class="required">*</span>
                                 <span class="required">${erros['contract.signDate']}</span>
                                <%--<span class="required"><form:errors path="signDate"></form:errors></span>--%>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                合同金额
                            </th>
                            <td>
                                <%--<form:input path="amount"/>--%>
                                <input type="text" name="contractDto.amount" size="20" value="" id="contractForm_contract_amount"/>
                                <span class="required">*</span>
                                <span class="required">${erros['contract.amount']}</span>
                                <%--<span class="required"><form:errors path="amount"></form:errors></span>--%>
                            </td>
                            <th>
                                合约开始日期
                            </th>
                            <td>
                                <input type="text" name="contractDto.startDate" size="20" value="" readonly="readonly" id="startSrvDate" class="date"/>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                签约人
                            </th>
                            <td>
                                <input type="text" name="contract.customerName" value="${user.username}" id="tagSignUsers" readonly="true"/>
                                <span class="required">*</span>
                                <span class="required">${erros['contract.signUserName']}</span>
                                <%--<span class="required"><form:errors path="signUserName"></form:errors></span>--%>
                            </td>
                            <th>
                                合约结束日期
                            </th>
                            <td>
                                <input type="text" name="contractDto.endDate" size="20" value="" readonly="readonly" id="endSrvDate" class="date"/>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                备注
                            </th>
                            <td colspan="3">
                                <textarea name="contractDto.remark" cols="48" rows="2" id="contractForm_contract_remark"></textarea>
                            </td>
                        </tr>
                    </table>
                </div>
            <div>
                    <table id="payTable" class="mytable" border="0">
                        <caption>
                            <%--<span class="required">
                                <ul class="errorMessage">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </span><br/>--%>
                            付款计划
                            <img src="${path}/images/add.png" id="addTable">
                        </caption>
                        <tr>
                           <th style="width: 30px;"></th>
                            <th>费用名称</th>
                            <th>金额</th>
                            <th>计划到款日期</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </table>
                </div>
                <div class="buttonBar">
                    <button id="btnSave">保存</button>
                    <button id="btnReset" type="reset">重置</button>
                    <button id="btnBack" type="button" onclick="javascript:history.back()">返回</button>
                </div>
            </div>
    </form>
    <%--</form:form>--%>
    </div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>